<header class="site-header">

  <div class="container txt-center">
    <a href="#" class="nav-toogle js-menu-trigger sliding-panel-button">
      <span></span>
      <span></span>
      <span></span>
    </a>

    <nav class="js-menu sliding-panel-content">
      <ul>
        <li><a href="{{ "/" | prepend: site.baseurl }}">home</a></li>
        <li><a href="{{ "/about" | prepend: site.baseurl }}">about</a></li>
        <li><a href="{{ site.author.url }}/about" target="_blank">the author</a></li>
        <li><a href="{{ site.repo }}" target="_blank">Download</a></li>
        <li><a href="{{ "/feed.xml" | prepend: site.baseurl }}" target="_blank"><i class="icon icon-feed"></i> feed</a></li>
      </ul>
    </nav>
    <div class="js-menu-screen sliding-panel-fade-screen"></div>

    <a href="{{ "/" | prepend: site.baseurl }}" class="author-thumb dot">
      <img src="{{ "/images/author.jpg" | prepend: site.baseurl }}" alt="Author thumbnail" class="dot">
    </a>

    {% if page.id %}
      <h1 class="post-title">{{ page.title }}</h1>
      <p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
    {% elsif page.bodyclass == 'page' %}
      <h1 class="post-title">{{ page.title }}</h1>
    {% else %}
      <h1>{{ site.name }}</h1>
      {% include search.html %}
    {% endif %}

  </div>

</header>
